<template>
  <div>
    <h2 align="center">会员注册页面</h2>
    <table align="center" border="1">
      <tr>
        <td>手机号</td>
        <td><input type="text" v-model="state.M_Phone"></td>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="password" v-model="state.M_Pwd"></td>
      </tr>
      <!-- <tr>
        <td>确认密码</td>
        <td><input type="password"></td>
      </tr> -->
      <tr>
        <td>真实姓名</td>
        <td><input type="text" v-model="state.M_Name"></td>
      </tr>
      <tr>
        <td>证件类型</td>
        <td><select v-model="state.M_Type">
          <option value="">--请选择--</option>
          <option :value="item.id" v-for="item in list">{{ item.con }}</option>
        </select></td>
      </tr>
      <tr>
        <td>证件号码</td>
        <td><input type="text" v-model="state.M_Card"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" name="sex" :value="false" checked>男
          <input type="radio" name="sex" :value="true">女
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="注册" @click="regist"></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs } from 'vue';
import axios from 'axios'
import {useRouter} from 'vue-router';

const router=useRouter();
let data :any = reactive({
  state:{
    M_Phone:'',
    M_Pwd:'',
    M_Name:'',
    M_Type:'',
    M_Card:'',
    M_Sex:''
  },
  list:[
    {id:1,con:"护照"},
    {id:2,con:"身份证"}
  ]
})

let {state,list} = toRefs(data)

const regist=()=>{

console.log(state)

axios({
  url:'/api/Member/PostRegist',
  method:'post',
  data:data.state.value
})
.then(res=>{
  console.log(res);
  if(res.data.data > 0){
    alert("注册成功");
    router.push("/login");
  }
  else{
    alert("注册失败");
    return
  }
})
.catch(err=>{
  console.log(err);
})
}
</script>

<style scoped>

</style>